<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<head>
    <title>天气定位 - 赋值科技</title>
    <meta charset="utf-8">
    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="css/ui-box.css">
    <link rel="stylesheet" href="css/ui-base.css">
    <link rel="stylesheet" href="css/ui-color.css">
    <link rel="stylesheet" href="css/appcan.icon.css">
    <link rel="stylesheet" href="css/appcan.control.css">
    <link rel="stylesheet" href="weather_location/css/weather_location.css">
</head>
<body class="" ontouchstart>
    <div class="bc-bg" tabindex="0" data-control="PAGE" id="Page">
        <!-- 头部 -->
        <div class="uh bc-head  ubb bc-border" data-control="HEADER" id="Header">
            <div class="ub">
                <div class="nav-btn" id="nav-left">
                    <div class="fa fa-angle-left fa-2x"></div>
                </div>
                <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">天气定位</h1>
                <div class="nav-btn" id="nav-right">
                    <div class="fa fa-refresh" onclick="refreshWeather()"></div>
                </div>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="ub ub-ver" data-control="CONTENT" id="ScrollContent">
            <div class="scrollbox">
                <!-- 位置信息 -->
                <div class="location-section ub ub-ac ub-pc">
                    <div class="fa fa-map-marker umar-r"></div>
                    <div id="location-text" class="ulev-1">正在获取位置信息...</div>
                </div>
                
                <!-- 实时天气 -->
                <div class="weather-card bc-head">
                    <div class="weather-main ub ub-ver ub-ac">
                        <div id="weather-temp" class="weather-temp">--°</div>
                        <div id="weather-desc" class="weather-desc umar-t-s">加载中...</div>
                        <div class="weather-icon">
                            <i id="weather-icon" class="fa fa-spinner fa-spin fa-3x"></i>
                        </div>
                    </div>
                    
                    <!-- 天气详情 -->
                    <div class="weather-details">
                        <div class="weather-details-grid">
                            <div class="detail-item">
                            <div class="detail-label">湿度</div>
                                <div id="humidity" class="detail-value">--%</div>
                        </div>
                            <div class="detail-item">
                            <div class="detail-label">风速</div>
                                <div id="wind-speed" class="detail-value">--m/s</div>
                        </div>


                        </div>
                    </div>
                    
                    <!-- 更新时间 -->
                    <div class="update-time tx-c umar-t">
                        <span class="ulev--1 t-gra">更新时间：</span>
                        <span id="update-time" class="ulev--1 t-gra">--</span>
                    </div>
                    
                    <!-- 数据说明 -->
                    <div class="data-info tx-c umar-t">
                        <span class="ulev--2 t-gra">*温度、湿度、风力为高德地图真实数据</span>
                    </div>
                </div>
                
                <!-- 7天天气预报 -->
                <div class="forecast-section umar-t">
                    <div class="section-title ub ub-ac uinn">
                        <div class="fa fa-calendar umar-r"></div>
                        <div class="ulev-1">7天天气预报</div>
                    </div>
                    <div id="forecast-list" class="forecast-list">
                        <!-- 动态加载天气预报 -->
                    </div>
                </div>
                
                <!-- 空气质量 (高德API不提供此数据) -->
                <div class="air-quality-section umar-t">
                    <div class="section-title ub ub-ac uinn">
                        <div class="fa fa-leaf umar-r"></div>
                        <div class="ulev-1">空气质量 (模拟数据)</div>
                    </div>
                    <div class="air-quality-content uinn">
                        <div class="ub ub-ac">
                            <div class="aqi-circle ub ub-ac ub-pc">
                                <div class="ub ub-ver ub-ac">
                                    <div id="aqi-value" class="aqi-value">--</div>
                                    <div class="aqi-label">AQI</div>
                                </div>
                            </div>
                            <div class="ub-f1 umar-l">
                                <div id="aqi-level" class="ulev-1">--</div>
                                <div id="aqi-desc" class="ulev--1 t-gra umar-t-xs">--</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 生活指数 (高德API不提供此数据) -->
                <div class="life-index-section umar-t umar-b">
                    <div class="section-title ub ub-ac uinn">
                        <div class="fa fa-heart umar-r"></div>
                        <div class="ulev-1">生活指数 (模拟数据)</div>
                    </div>
                    <div class="life-index-grid ub ub-wrap uinn">
                        <div class="life-index-item ub-f1 ub ub-ver ub-ac">
                            <div class="fa fa-umbrella fa-2x index-icon"></div>
                            <div class="index-name">雨伞指数</div>
                            <div id="umbrella-index" class="index-value">--</div>
                        </div>

                        <div class="life-index-item ub-f1 ub ub-ver ub-ac">
                            <div class="fa fa-tshirt fa-2x index-icon"></div>
                            <div class="index-name">穿衣指数</div>
                            <div id="clothes-index" class="index-value">--</div>
                        </div>
                        <div class="life-index-item ub-f1 ub ub-ver ub-ac">
                            <div class="fa fa-car fa-2x index-icon"></div>
                            <div class="index-name">洗车指数</div>
                            <div id="car-wash-index" class="index-value">--</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 浮动刷新按钮 -->
    <button class="refresh-weather-btn" onclick="refreshWeather()">
        <i class="fa fa-refresh"></i>
    </button>
    
    <script src="js/appcan.js"></script>
    <script src="js/appcan.control.js"></script>
    <script src="js/appcan.scrollbox.js"></script>
    <script src="js/weather_location.js"></script>
</body>
</html> 